<!-- components/date-picker/date-picker.vue -->
<template>
    <view class="date-picker">
      <uni-datetime-picker
        ref="datePicker"
        :type="type"
        :value="value"
        :start="startDate"
        :end="endDate"
        :disabled="disabled"
        :border="border"
        :hide-second="hideSecond"
        @change="handleChange"
        @maskClick="maskClick"
      >
        <slot>
          <view class="picker-input">
            <text v-if="!value" class="placeholder">{{ placeholder }}</text>
            <text v-else>{{ displayValue }}</text>
            <!-- <uni-icons v-if="clearable && value" type="clear" size="20" @click.stop="handleClear" /> -->
          </view>
        </slot>
      </uni-datetime-picker>
    </view>
  </template>
  
  <script>
  export default {
    name: 'DatePicker',
    props: {
      // 日期类型：date-日期，datetime-日期时间，year-年，month-月，time-时间
      type: {
        type: String,
        default: 'date'
      },
      // 绑定值
      modelValue: {
        type: [String, Number],
        default: ''
      },
      // 占位符
      placeholder: {
        type: String,
        default: '请选择日期'
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 是否显示边框
      border: {
        type: Boolean,
        default: true
      },
      // 是否隐藏秒（时间选择时）
      hideSecond: {
        type: Boolean,
        default: true
      },
      // 最小日期
      minDate: {
        type: [String, Number],
        default: ''
      },
      // 最大日期
      maxDate: {
        type: [String, Number],
        default: ''
      },
      // 是否可清空
      clearable: {
        type: Boolean,
        default: true
      },
      // 日期格式化显示
      format: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        value: this.modelValue
      }
    },
    computed: {
      startDate() {
        return this.minDate || '1970-01-01'
      },
      endDate() {
        return this.maxDate || '2100-12-31'
      },
      displayValue() {
        if (!this.value) return ''
        
        if (this.format) {
          return this.formatDate(this.value, this.format)
        }
        
        // 默认显示格式
        if (this.type === 'date') {
          return this.formatDate(this.value, 'YYYY-MM-DD')
        } else if (this.type === 'datetime') {
          return this.formatDate(this.value, 'YYYY-MM-DD HH:mm')
        } else if (this.type === 'time') {
          return this.formatDate(this.value, 'HH:mm')
        } else if (this.type === 'year') {
          return this.formatDate(this.value, 'YYYY')
        } else if (this.type === 'month') {
          return this.formatDate(this.value, 'YYYY-MM')
        }
        return this.value
      }
    },
    watch: {
      modelValue(newVal) {
        this.value = newVal
      }
    },
    methods: {
      handleChange(e) {
        this.value = e
        this.$emit('update:modelValue', e)
        this.$emit('change', e)
      },
      handleClear() {
        this.value = ''
        this.$emit('update:modelValue', '')
        this.$emit('change', '')
        this.$emit('clear')
      },
      maskClick(e) {
        this.$emit('maskClick', e)
      },
      // 格式化日期
      formatDate(date, format) {
        if (!date) return ''
        
        const d = new Date(date)
        const year = d.getFullYear()
        const month = (d.getMonth() + 1).toString().padStart(2, '0')
        const day = d.getDate().toString().padStart(2, '0')
        const hours = d.getHours().toString().padStart(2, '0')
        const minutes = d.getMinutes().toString().padStart(2, '0')
        const seconds = d.getSeconds().toString().padStart(2, '0')
        
        return format
          .replace('YYYY', year)
          .replace('MM', month)
          .replace('DD', day)
          .replace('HH', hours)
          .replace('mm', minutes)
          .replace('ss', seconds)
      },
      // 外部调用方法：打开选择器
      show() {
        this.$refs.datePicker.show()
      },
      // 外部调用方法：关闭选择器
      hide() {
        this.$refs.datePicker.hide()
      }
    }
  }
  </script>
  
  <style scoped>
  .date-picker {
    width: 100%;
  }
  
  .picker-input {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12rpx 0;
  }
  
  .placeholder {
    color: #999;
  }
  </style>